import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import ComponentStore from '../../stores/ComponentStore';
import { observer } from 'mobx-react';
import './tab.scss';
import AuthStore from '../../stores/AuthStore';
import { RouterStore } from 'mobx-react-router';

import '../../utils/iconFont.scss';

interface TabSet {
    title: string;
    key: string;
    icon: JSX.Element;
    selectedIcon: JSX.Element;
    selected: boolean;
    onPress: () => void;
}
interface TabProps {
    authStore: AuthStore;
    componentStore: ComponentStore;
    routingStore: RouterStore;
}

@observer
export default class Tab extends Component<TabProps> {
    getTabItemOption(name: string, title: string): TabSet {
        const componentStore = this.props.componentStore;
        return {
            title: title,
            key: title,
            icon:
                (
                    <span className={`iconStyle icon-${ name }`} />
                ),
            selectedIcon:
                (
                    <span
                        className={`active-iconStyle iconStyle icon-${ name }`}                   
                    />
                ),
            selected: componentStore.currentTab === name,

            onPress: () => {
                if (componentStore.currentTab === name || name === 'detail') {
                    return;
                }
                componentStore.currentTab = name;
                componentStore.routingToPage(name, this.props.routingStore, this.props.authStore);
            }
        };
    }
    render(): JSX.Element {
        const authStore = this.props.authStore as AuthStore;
        return (
            <div className="tab-container">
                <TabBar
                    unselectedTintColor="#949494"
                    barTintColor="rgb(246,246,246)"
                    tintColor="#b96b91"
                    hidden={!authStore.isLogin}
                >
                    <TabBar.Item {...this.getTabItemOption('home', '统计')} />
                    <TabBar.Item {...this.getTabItemOption('monitor', '热点')} />
                    <TabBar.Item {...this.getTabItemOption('detail', '办单')} />
                    <TabBar.Item {...this.getTabItemOption('me', '我的')} />
                </TabBar>
            </div>
        );
    }
}